/**
//src/APP.vue

//显示结果
<div id="class-example">
    <div class="active">第一种</div>
    <div class="static active">第二种</div>
    <div class="active text-danger">第三种</div>
    <div class="active">第四种</div>
</div>

 */

<template>
<div id="class-example">
  <div :class="{ active: first }">第一种</div>
  <div
    class="static"
    :class="{ active: secondIsActive, 'text-danger': secondHasError }"
  >第二种</div>
  <div :class="thirdObject">第三种</div>
  <div :class="four">第四种</div>
</div>
</template>

<script lang="ts">
import { computed, defineComponent, reactive, ref, toRefs, watch, watchEffect } from 'vue'

export default defineComponent({
  name:"APP",
  setup() {
    const first = ref(true)
    const second = reactive({
      secondIsActive: true,
      secondHasError: false
    })
    const thirdObject = reactive({
      active: true,
      'text-danger': true
    })
    const fourthObject = reactive({
      isAcive: true,
      error: null
    })

    const four = computed(() => {
      return {
        active: fourthObject.isAcive && !fourthObject.error,
        'text-danger': fourthObject.error && fourthObject.error.type === 'fatal'
      }
    })

    return {
      first,
      ...toRefs(second),
      thirdObject,
      four
    }
  }

})
</script>